<template>
  <a-form>
    <div class="mr20" @click="toggle">
      <slot name="firstLine"></slot>
      <slot name="moreLine" v-if="visible"></slot>
      <a-row justify="end" class="mt10">
        <a-space :size="20">
          <a @click="showOff">
            {{ visible ? '收起' : '展开' }}
            <UpOutlined v-if="visible" /><DownOutlined v-else />
          </a>
          <a-button @click="onSubmit" type="primary">查询</a-button>
          <a-button @click="reset" type="primary">重置</a-button>
        </a-space>
      </a-row>
    </div>
  </a-form>
</template>
<script>
import { ref } from 'vue'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
export default {
  components: {
    UpOutlined,
    DownOutlined
  },
  props: {},
  emits: {
    submit: null,
    reset: null
  },
  setup(props, { emit }) {
    const visible = ref(true)
    const showOff = () => {
      visible.value = !visible.value
    }
    const onSubmit = () => {
      emit('submit')
    }
    const reset = () => {
      emit('reset')
    }
    return {
      visible,
      showOff,
      onSubmit,
      reset
    }
  }
}
</script>
